<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="75%">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      height="460"
      style="width: 100%;">
      <el-table-column
        prop="vnfId"
        header-align="center"
        align="center"

        label="VNF标识">
      </el-table-column>
      <el-table-column
        prop="vnfName"
        header-align="center"
        align="center"

        label="VNF名称">
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="VNF类型">
<!--         <template slot-scope="scope">-->
<!--          <el-tag v-if="scope.row.type === '0'" size="small">防火墙</el-tag>-->
<!--          <el-tag v-else-if="scope.row.type === '1'"  size="small" >VPN</el-tag>-->
<!--          <el-tag v-else size="small" type="danger" >其他</el-tag>-->
<!--        </template>-->
      </el-table-column>
      <!-- <el-table-column
        prop="params"
        header-align="center"
        align="center"
        label="参数">
      </el-table-column> -->
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="状态">
        <!-- <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small">成功</el-tag>
          <el-tag v-else @click.native="showErrorInfo(scope.row.logId)" size="small" type="danger" style="cursor: pointer;">失败</el-tag>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="isSuccess"
        header-align="center"
        align="center"
        label="指令执行状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isSuccess === 0" size="small" type="danger"
                  style="cursor: pointer;">失败</el-tag>
          <el-tag v-else  size="small" >成功
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="floatIp"
        header-align="center"
        align="center"
        width="180"
        label="外部链接">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="jumpUrl(scope.row.floatIp)">跳转</el-button>
          </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                dataList: [],
                dataListLoading: false
            }
        },
        methods: {
            init(val) {
                this.visible = true
                this.getDataList(val)
            },
            // 获取数据列表
            getDataList(val) {
                let data = []
                data.push(val)
                this.dataListLoading = false
                this.$http({
                    url: this.$http.adornHardWareUrl(`/generator/order/vdus`),
                    method: 'post',
                    data: this.$http.adornData(data, false)
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        let newList = []
                        let vnfs = data.vnfs
                        for (var id in vnfs) {
                            console.log(id)
                            if (val === id) {
                                newList = vnfs[id]
                                break
                            }
                        }

                        for (let i = 0; i < newList.length; i++) {
                            newList[i].vnfType = newList[i].vnfType == '0' ? '防火墙' : 'VPN'
                        }
                        this.dataList = newList
                    }
                    this.dataListLoading = false
                })
            },
            jumpUrl(url){

                var href = "https://"+url+":8889"
                window.open(href, '_blank')
            }
        }
    }
</script>



